<template>
    <el-tooltip effect="customized" content="全屏" popper-class="atooltip">
        <FullScreen class="FullScreen" @click="fullScreen()" />
    </el-tooltip>
</template>
<script>
import {ref} from 'vue'
import { ElTooltip } from 'element-plus';

export default {
    components: {
        ElTooltip,
    },
    props: {

    },
    setup(props, context) {
        const isFullScreen = ref(false)
        /*
  * 浏览器全屏方法
  * 使用方法: 绑定点击事件即可
  * @return void
  */
        const fullScreen = () => {
            if (isFullScreen.value == false) {
                var ele = document.documentElement,
                    reqFullScreen =
                        ele.requestFullScreen ||
                        ele.webkitRequestFullScreen ||
                        ele.mozRequestFullScreen ||
                        ele.msRequestFullscreen;
                if (typeof reqFullScreen !== "undefined" && reqFullScreen) {
                    reqFullScreen.call(ele);
                }
                isFullScreen.value = true;
            } else {
                var ele = document.documentElement;
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                isFullScreen.value = false;
            }
        }
        return {
            isFullScreen,
            fullScreen
        }
    }
}
</script>
<style lang="less">
.atooltip {
  min-width: 50px;
  padding: 6px 12px !important;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)) !important;
}

.atooltip .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689) !important;
  right: 0 !important;
}
</style>